<template>
  <div>
    <el-select
      @change="mtChange"
      clearable
      filterable
      multiple
      v-model="state.value"
    >
      <el-option
        v-for="item in state.mtOptions"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      />
    </el-select>
  </div>
</template>
<script lang="ts" setup>
import { reactive, inject, onMounted, onBeforeUnmount } from "vue";
import { TableColumn, TableRow } from "@/utils/baTable";
import type baTableClass from "@/utils/baTable";
import useCurrentInstance from "@/utils/useCurrentInstance";

const state: {
  mtOptions: anyObj[];
  value: string | number;
} = reactive({
  mtOptions: [],
  value: "",
});

const { proxy } = useCurrentInstance();
const baTable = inject("baTable") as baTableClass;
const processPull = inject("processPull") as any;

interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
}
const props = defineProps<Props>();

proxy.eventBus.on("clearTag", () => {
  baTable.comSearch.form[props.renderField as any] = "";
  baTable.comSearch.form[props.renderField + "s"] = [];
  state.value = "";
});

const mtChange = (value: any) => {
  console.log("mtchange!", value, typeof value);
  state.value = value;
  if (value == "" || value.length == 0) {
    baTable.comSearch.form[props.renderField as any] = "";
    baTable.comSearch.form[props.renderField + "s"] = [];
  } else {
    if (value.length > 1) {
      baTable.comSearch.form[props.renderField as any] = "";
      baTable.comSearch.form[props.renderField + "s"] = value;
    } else {
      baTable.comSearch.form[props.renderField as any] = value[0];
    }
  }
};

//给到key
const reset = (data: any[]) => {
  let len = data.length,
    newArr: any[] = [];
  for (let i = 0; i < len; i++) {
    newArr.push({
      name: data[i],
    });
  }
  state.mtOptions = newArr;
};
//获取机器类型列表
const getMtTypInfo = () => {
  processPull
    .getMtTypeList({ pageSize: 999999 })
    .then((res: any) => {
      console.log("获取机器类型列表", res);
      reset(res.data);
    })
    .catch((err: any) => {});
};

onMounted(() => {
  //获取机器类型列表
  getMtTypInfo();
  //   console.log("props", props.renderRow, props.renderField);
});
onBeforeUnmount(() => {
  proxy.eventBus.off("clearTag");
});
</script>
<style lang="scss" scoped></style>
